<template>
    <div class="page">
        <n-form :model="model">
            <n-form-item label="账户">
                <n-input v-model:value="model.username" @keydown.enter.prevent />
            </n-form-item>
            <n-form-item label="密码">
                <n-input v-model:value="model.password" @keydown.enter.prevent />
            </n-form-item>
            <n-space>
                <n-button @click="onLogin">登录</n-button>
            </n-space>
        </n-form>
    </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch } from "vue";
import { NForm, NTreeSelect, NInput, NButton, NFormItem, NSpace, NTag, useMessage } from "naive-ui";
import { useUserStore } from "@/stores/user";
const userStore = useUserStore();
interface ModelType {
    username: string;
    password: string;
}

const model = ref<ModelType>({
    username: "",
    password: "",
});

const onLogin = () => {
    console.log(model.value);
    userStore.login(model.value);
};
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>

